<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>业主爱家</title>
<link type="text/css" rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/style.css" media="screen"
	type="text/css" />
<!-- 最新 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="css/bootstrap.min.css">

<!-- 可选的Bootstrap主题文件（一般不用引入） -->
<link rel="stylesheet" href="css/bootstrap-theme.min.css">
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="js/jquery.min.js"></script>

<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="js/bootstrap.min.js"></script>

<style>
* {
	margin: 0px auto;
	padding: 0px;
}

.dropdown-menu {
	width: 100%;
}

input[type="file"] {
	display: inherit
}
</style>
<script type="text/javascript" src="js/jquery-1.12.4.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	
});
function checks(id) {
	alert(id);
	$.getJSON("districtDetails",{id : id},
	function(data) {
	var html = "";
	$.each(data,function(i,item) {
		html += "<tr>";
		html += "<td>保安处电话:<input type='hidden' name='id' value='" + item["disId"]["id"] + "'/></td>";
		html += "<td><input type='text' name='securityPhone' value='" + item["disId"]["securityPhone"] + "'/></td>";
		html += "</tr>";
		html += "<tr>";
		html += "<td>物管处电话:<input type='hidden' name='idd' value='" +item["uid"]["id"] + "'/></td>";
		html += "<td><input type='text' name='phone' value='" + item["uid"]["phone"] + "'/></td>";
		html += "</tr>";
		html += "<tr>";
		html += "<td>小区LOGO:</td>";
		html += "<td><input type='file' name='image' /><input type='hidden' name='imagess' value='" + item["image"] + "'/></td>";
		html += "</tr>";
	  })
	  $("#myTable").children().remove();
	  $("#myTable").append(html);
	});
	return false;
}
</script>
</head>
<body style="width: 100%;">
	<!--右边内容栏-->
	<div id="content">
		<div id="conTitle">&nbsp;| 小区详情信息</div>
		<div id="villageDetail">
			<table id="villageInfo">
				<c:forEach var="list" items="${list}" varStatus="l">
					<tr>
						<td rowspan="4" style="width: 180px; height: 180px;"><a
							 data-toggle="modal" data-target="#myModal"><img
								src="image/${list.disId.id}.jpg"
								style="width: 160px; height: 160px;" class="check"
								onclick="checks(${list.disId.id})" /></a></td>
						<td colspan="2" style="width: 120px;"><h2>${list.disId.districtName}</h2></td>
						<td></td>
					</tr>
					<tr>
						<td></td>
						<td>小区地址:</td>
						<td>${list.disId.districtDetail}</td>
					</tr>
					<tr>
						<td></td>
						<td>保安处电话:</td>
						<td>${list.disId.securityPhone}</td>
					</tr>
					<tr>
						<td></td>
						<td>物管处电话:</td>
						<td>${list.uid.phone}</td>
					</tr>
				</c:forEach>
			</table>
		</div>
	</div>
	<form action="updateDisasUser" method="post" enctype="multipart/form-data">
	<div class="modal fade" id="myModal" tabindex="-1" role="dialog"
		aria-labelledby="myModalLabel" aria-hidden="true">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal"
						aria-hidden="true">&times;</button>
					<h4 class="modal-title" id="myModalLabel">编辑房屋信息</h4>
				</div>
				<form class="modal-body">
					<table id="myTable">
						<!-- 
					<label class="np">保安处电话:</label><input name="" type="text"
						value="" /><br /> 
					<label class="np">物管处电话:</label><input name=""
						type="text" value="" /><br/>
					<label class="np">小区LOGO:<input type="file"/>	
					 -->
					</table>
				</form>
				<div class="modal-footer">
					<button type="submit" class="btn btn-primary">提交</button>
					<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
				</div>
			</div>
			<!-- /.modal-content -->
		</div>
		<!-- /.modal-dialog -->
	</div>
	</form>
</body>
</html>